<template>
    <el-card>
        <publicHeader @add="addHandler" @refresh-handler="refreshHandler"></publicHeader>
        <el-table :data="classifyList" style="width: 100%" v-loading="loading">
            <el-table-column prop="name" width="600" />
            <el-table-column width="280">
                <template #default="{ row }">
                    <div>
                        <el-button text type="primary" size="small" @click="drawer2Handler(row.id)">推荐商品</el-button>
                        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                            @change="changeHandler(row.id, row.status)" />

                        <el-button text size='small' type="primary" @click="updataHandler(row.id, row.name)">修改</el-button>
                        <el-button text size="small" type="primary" @click="removeHandler(row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer v-model="drawer" @close="closeHandler">
            <template #header>
                <h4>{{ title ? '增加' : '修改' }}商品分类页面</h4>
            </template>
            <template #default>
                <el-input v-model="input" placeholder="请输入名称" />
            </template>
            <template #footer>
                <el-button type="primary" @click="submitAddHandler" v-show="title">确定</el-button>
                <el-button type="primary" @click="submitUpdataHandler" v-show="!title">确定</el-button>
                <el-button type="default">取消</el-button>
            </template>
        </el-drawer>

        <!-- 二号抽屉 -->
        <my-drawer ref="drawerHtml" 
        :data="categoryData" 
        @remove-handler="removeDrawerHandler"
        :loading="loading1"
        @submit="dialogHandler">
        </my-drawer>

        <!-- dialog对话框 -->
        <my-dialog
        ref="dialogHtml"></my-dialog>
    </el-card>
</template>
<script setup lang='ts'>
import myDrawer from './components/drawer.vue'
import publicHeader from '@/components/publicHeader.vue'
import myDialog from './components/dialog.vue'
import { ref, reactive, onMounted } from 'vue'
import {
    classifyListApi,
    updataClassifyStateApi,
    addCategoryApi,
    updataClassifyApi,
    removeClassifyApi,
    app_category_itemApi,
    removeApp_category_itemApi
} from '@/api/classify'
import { ElMessage , ElNotification} from 'element-plus'
// 加载效果
const loading = ref(false)

const classifyList = ref([])

const title = ref(false)
// 抽屉开关
const drawer = ref(false)

const input = ref()
// 新增按钮
const addHandler = () => {
    drawer.value = true
    title.value = true
}
// 新增确定按钮
const submitAddHandler = async () => {
    const res = await addCategoryApi(input.value)
    if (res.data.msg === 'ok') {
        drawer.value = false
        input.value = ''
        ElMessage({
            type: 'success',
            message: '添加成功'
        })
        getClassifyList()
    }
}
// 刷新
const refreshHandler = () => getClassifyList()

const getClassifyList = () => {
    loading.value = true
    classifyListApi().then(res => {
        classifyList.value = res.data.data
        loading.value = false
        console.log(res);

    })
}
// 修改商品状态函数
const changeHandler = async (id: number, status: number) => {
    const res = await updataClassifyStateApi(id, status - 0)
    if (res.data.data) {
        ElMessage({
            type: 'success',
            message: '修改成功',
        })
    }

}
const updataId = ref(0)
// 修改商品
const updataHandler = (id: number, name: string) => {
    drawer.value = true
    input.value = name
    updataId.value = id
}
// 修改商品确定按钮
const submitUpdataHandler = async () => {
    const res = await updataClassifyApi(updataId.value, input.value)
    if (res.data.msg === 'ok') {
        getClassifyList()
        drawer.value = false
        input.value = ''
    }
}
const closeHandler = () => {
    input.value = ''
}
// 删除商品分类
const removeHandler = (id: number) => {
    removeClassifyApi(id).then(res => {
        if (res.data.data) {
            getClassifyList()
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
        }
    })
}
// 二号抽屉
const drawerHtml = ref()
const loading1 = ref(false)
// 二号抽屉数据
const categoryData = ref()
// 打开2号抽屉
const drawer2Handler = (id: number) => {
    drawerHtml.value.openDrawer()
    getCategoryList(id)
}
const idea = ref()
// 获取分类列表小数据
const getCategoryList = async (id: number) => {
    idea.value = id
    loading1.value = true
    const res = await app_category_itemApi(id)
    categoryData.value = res.data.data
    loading1.value = false
}
// 删除商品分类下推荐商品
const removeDrawerHandler = async (id: number) => {
    const res = await removeApp_category_itemApi(id)
    if (res.data.data) {
        ElNotification({
            title: 'Success',
            message: '删除成功',
            type: 'success',
        })
        getCategoryList(idea.value)
    }

}
const dialogHtml = ref()

// dialog对话框
const dialogHandler = () => {    
    dialogHtml.value.openHandler()
}
console.log(dialogHtml);

onMounted(() => {
    getClassifyList()
})
</script>
<style lang='scss' scoped>
.right {
    width: 500px;
    display: flex;
    align-items: center;
}
</style>